<template>

    <div class="table-page">
        <div style="height: 35px;">
            <span >机构名称:  <span class="title"> {{ groupName}}</span></span>
        </div>


        <div class="table-search-box" style="display: block !important;" @keyup.enter="search()">
            <div v-if="'registerLog' === activeName" class="search-item">
                <label>注册来源：</label>
                <el-checkbox-group v-model="queryData.registerTypes">
                    <el-checkbox v-for="type in registerTypes" :key="type.value" :label="type.value">{{
                            type.label
                        }}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
            <div v-else class="search-item">
                <label>统计来源：</label>
                <el-checkbox-group v-model="queryData.sourceTypes">
                    <el-checkbox v-for="type in sourceTypes" :key="type.value" :label="type.value">{{
                            type.label
                        }}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
<!--            <div class="search-item">-->
<!--                <label>统计数据：</label>-->
<!--                <template>-->
<!--                    <el-radio v-model="queryData.real" :label="true">真实数据</el-radio>-->
<!--                    <el-radio v-model="queryData.real" :label="false">注水数据</el-radio>-->
<!--                </template>-->
<!--            </div>-->
            <div class="search-item" style="flex: none">
                <label>机构IP段：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.ipStr"
                        clearable
                        placeholder="机构IP段"
                    ></el-input>
                </div>
                <label>统计时间：</label>
                <el-date-picker
                    v-model="queryData.time"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                <div style="margin-left: 20px">
                    <el-button
                        type="primary"
                        icon="el-icon-search"
                        :loading="dataList[activeName].loading"
                        @click="clickSearch()"
                    >搜索
                    </el-button>
                    <el-button
                        icon="el-icon-refresh"
                        :loading="dataList[activeName].loading"
                        @click="resetSearch()"
                    >重置
                    </el-button>
                </div>

            </div>
        </div>
        <div>
            <el-tabs v-model="activeName">
                <el-tab-pane label="访问量" name="accessLog">
                    <div class="search-item" style="margin-bottom: 10px">
                        <label>统计日期：</label>
                        <template>
                            <el-radio v-model="dataList['accessLog'].query.groupType" label="month">按月统计</el-radio>
                            <el-radio v-model="dataList['accessLog'].query.groupType" label="day">按日统计</el-radio>
                        </template>
                    </div>
                    <div class="tabDiv">
                        <div class="table-data-box">
                            <el-table
                                ref="accessLogTimeTable"
                                v-loading="dataList['accessLog'].loading"
                                :data="dataList['accessLog'].res.timeCount"
                                border
                                style="width: 80%"
                                row-key="key"
                            >
                                <el-table-column
                                    prop="key"
                                    label="日期"
                                ></el-table-column>
                                <el-table-column
                                    prop="count"
                                    label="访问量"
                                ></el-table-column>

                            </el-table>
                        </div>
                    </div>
                    <div class="tabDiv">
                        <div class="table-data-box">
                            <el-table
                                ref="accessLogTypeTable"
                                v-loading="dataList['accessLog'].loading"
                                :data="dataList['accessLog'].res.typeCount"
                                border
                                show-summary
                                :summary-method="getSummaries"
                                style="width: 80%;"
                                row-key="key"
                            >
                                <el-table-column
                                    prop="name"
                                    label="统计来源"
                                ></el-table-column>
                                <el-table-column
                                    prop="count"
                                    label="访问量"
                                ></el-table-column>
                                <el-table-column
                                    prop="percent"
                                    label="占比"
                                ></el-table-column>

                            </el-table>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="使用人次" name="useLog">
                    <div class="search-item" style="margin-bottom: 10px">
                        <label>统计日期：</label>
                        <template>
                            <el-radio v-model="dataList['useLog'].query.groupType" label="month">按月统计</el-radio>
                            <el-radio v-model="dataList['useLog'].query.groupType" label="day">按日统计</el-radio>
                        </template>
                    </div>
                    <div class="tabDiv">
                        <div class="table-data-box">
                            <el-table
                                ref="useLogTimeTable"
                                v-loading="dataList['useLog'].loading"
                                :data="dataList['useLog'].res.timeCount"
                                border
                                style="width: 80%"
                                row-key="key"
                            >
                                <el-table-column
                                    prop="key"
                                    label="日期"
                                ></el-table-column>
                                <el-table-column
                                    prop="count"
                                    label="使用人次"
                                ></el-table-column>
                                <el-table-column
                                    prop="minutes"
                                    label="使用时长(分钟)"
                                ></el-table-column>

                            </el-table>
                        </div>
                    </div>
                    <div class="tabDiv">
                        <div class="table-data-box">
                            <el-table
                                ref="useLogTypeTable"
                                v-loading="dataList['useLog'].loading"
                                :data="dataList['useLog'].res.typeCount"
                                border
                                show-summary
                                :summary-method="getSummaries"
                                style="width: 80%;"
                                row-key="key"
                            >
                                <el-table-column
                                    prop="name"
                                    label="统计来源"
                                ></el-table-column>
                                <el-table-column
                                    prop="count"
                                    label="使用人次"
                                ></el-table-column>
                                <el-table-column
                                    prop="percent"
                                    label="占比"
                                ></el-table-column>

                            </el-table>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="试卷使用量" name="paperUseLog">
                    <div class="search-item" style="margin-bottom: 10px">
                        <label>统计日期：</label>
                        <template>
                            <el-radio v-model="dataList['paperUseLog'].query.industryType" label="zhiye">职业资格</el-radio>
                            <el-radio v-model="dataList['paperUseLog'].query.industryType" label="gjtk">高教题库</el-radio>
                        </template>
                    </div>
                    <div class="tabDiv">
                        <div class="table-data-box">
                            <el-table
                                ref="paperUseLogTimeTable"
                                v-loading="dataList['paperUseLog'].loading"
                                :data="dataList['paperUseLog'].res.typeCount"
                                border
                                show-summary
                                :summary-method="getPaperSummaries"
                                style="width: 80%"
                                row-key="key"
                            >
                                <el-table-column
                                    prop="name"
                                    label="考试分类"
                                ></el-table-column>
                                <el-table-column
                                    prop="count"
                                    label="试卷使用次数"
                                ></el-table-column>

                            </el-table>
                        </div>
                    </div>
                    <div class="tabDiv">
                        <div class="table-data-box">
                            <el-table
                                ref="paperUseLogTypeTable"
                                v-loading="dataList['paperUseLog'].loading"
                                :data="dataList['paperUseLog'].res.timeCount"
                                border
                                show-summary
                                :summary-method="getPaperSummaries"
                                style="width: 100%;"
                                row-key="key"
                            >
                                <el-table-column
                                    prop="key"
                                    label="日期"
                                ></el-table-column>
                                <el-table-column v-for="column in dataList['paperUseLog'].res.exams" :key="column.id" :prop="column.id" :label="column.name"></el-table-column>
                            </el-table>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="试题使用量" name="questionUseLog">
                    <div class="search-item" style="margin-bottom: 10px">
                        <label>统计日期：</label>
                        <template>
                            <el-radio v-model="dataList['questionUseLog'].query.industryType" label="zhiye">职业资格</el-radio>
                            <el-radio v-model="dataList['questionUseLog'].query.industryType" label="gjtk">高教题库</el-radio>
                        </template>
                    </div>
                    <div class="tabDiv">
                        <div class="table-data-box">
                            <el-table
                                ref="questionUseLogTimeTable"
                                v-loading="dataList['questionUseLog'].loading"
                                :data="dataList['questionUseLog'].res.typeCount"
                                border
                                show-summary
                                :summary-method="getQuestionSummaries"
                                style="width: 80%"
                                row-key="key"
                            >
                                <el-table-column
                                    prop="name"
                                    label="考试分类"
                                ></el-table-column>
                                <el-table-column
                                    prop="count"
                                    label="试卷使用次数"
                                ></el-table-column>

                            </el-table>
                        </div>
                    </div>
                    <div class="tabDiv">
                        <div class="table-data-box">
                            <el-table
                                ref="questionUseLogTypeTable"
                                v-loading="dataList['questionUseLog'].loading"
                                :data="dataList['questionUseLog'].res.timeCount"
                                border
                                show-summary
                                :summary-method="getQuestionSummaries"
                                style="width: 100%;"
                                row-key="key"
                            >
                                <el-table-column
                                    prop="key"
                                    label="日期"
                                ></el-table-column>
                                <el-table-column v-for="column in dataList['questionUseLog'].res.exams" :key="column.id" :prop="column.id" :label="column.name"></el-table-column>

                            </el-table>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="注册人数" name="registerLog">
                    <div class="search-item" style="margin-bottom: 10px">
                        <label>统计日期：</label>
                        <template>
                            <el-radio v-model="dataList['registerLog'].query.groupType" label="month">按月统计</el-radio>
                            <el-radio v-model="dataList['registerLog'].query.groupType" label="day">按日统计</el-radio>
                        </template>
                    </div>
                    <div class="tabDiv">
                        <div class="table-data-box">
                            <el-table
                                ref="registerLogTimeTable"
                                v-loading="dataList['registerLog'].loading"
                                :data="dataList['registerLog'].res.timeCount"
                                border
                                style="width: 80%"
                                row-key="key"
                            >
                                <el-table-column
                                    prop="key"
                                    label="日期"
                                ></el-table-column>
                                <el-table-column
                                    prop="count"
                                    label="新增注册人数"
                                ></el-table-column>
                                <el-table-column
                                    prop="total"
                                    label="总注册人数"
                                ></el-table-column>

                            </el-table>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="使用时长" name="timeUseLog">
                    <div class="search-item" style="margin-bottom: 10px">
                        <label>统计日期：</label>
                        <template>
                            <el-radio v-model="dataList['timeUseLog'].query.groupType" label="month">按月统计</el-radio>
                            <el-radio v-model="dataList['timeUseLog'].query.groupType" label="day">按日统计</el-radio>
                        </template>
                    </div>
                    <div class="tabDiv">
                        <div class="table-data-box">
                            <el-table
                                ref="timeUseLogLogTimeTable"
                                v-loading="dataList['timeUseLog'].loading"
                                :data="dataList['timeUseLog'].res.timeCount"
                                border
                                style="width: 80%"
                                row-key="key"
                            >
                                <el-table-column
                                    prop="key"
                                    label="日期"
                                ></el-table-column>
                                <el-table-column
                                    prop="count"
                                    label="使用时长(分钟)"
                                ></el-table-column>
                                <el-table-column
                                    prop="avgMinute"
                                    label="平均使用时长(分钟)"
                                ></el-table-column>

                            </el-table>
                        </div>
                    </div>
                    <div class="tabDiv">
                        <div class="table-data-box">
                            <el-table
                                ref="timeUseLogTypeTable"
                                v-loading="dataList['timeUseLog'].loading"
                                :data="dataList['timeUseLog'].res.typeCount"
                                border
                                show-summary
                                :summary-method="getSummaries"
                                style="width: 100%;"
                                row-key="key"
                            >
                                <el-table-column
                                    prop="name"
                                    label="考试类别"
                                ></el-table-column>
                                <el-table-column
                                    prop="count"
                                    label="使用时长"
                                ></el-table-column>
                                <el-table-column
                                    prop="percent"
                                    label="占比"
                                ></el-table-column>

                            </el-table>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="下载次数" name="downLoadLog">
                    <div class="search-item" style="margin-bottom: 10px">
                        <label>统计日期：</label>
                        <template>
                            <el-radio v-model="dataList['downLoadLog'].query.groupType" label="month">按月统计</el-radio>
                            <el-radio v-model="dataList['downLoadLog'].query.groupType" label="day">按日统计</el-radio>
                        </template>
                    </div>
                    <div class="tabDiv">
                        <div class="table-data-box">
                            <el-table
                                ref="downLoadLogTable"
                                v-loading="dataList['downLoadLog'].loading"
                                :data="dataList['downLoadLog'].res.timeCount"
                                border
                                style="width: 80%"
                                row-key="key"
                            >
                                <el-table-column
                                    prop="key"
                                    label="日期"
                                ></el-table-column>
                                <el-table-column
                                    prop="count"
                                    label="下载次数"
                                ></el-table-column>

                            </el-table>
                        </div>
                    </div>
                    <div class="tabDiv">
                        <div class="table-data-box">
                            <el-table
                                ref="downLoadLogTypeTable"
                                v-loading="dataList['downLoadLog'].loading"
                                :data="dataList['downLoadLog'].res.typeCount"
                                border
                                show-summary
                                :summary-method="getSummaries"
                                style="width: 100%;"
                                row-key="key"
                            >
                                <el-table-column
                                    prop="name"
                                    label="考试类别"
                                ></el-table-column>
                                <el-table-column
                                    prop="count"
                                    label="下载次数"
                                ></el-table-column>
                                <el-table-column
                                    prop="percent"
                                    label="占比"
                                ></el-table-column>

                            </el-table>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

    </div>
</template>

<script>
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {get} from "@/api/request";
import {isIp, isIpV6} from "@/utils/validate";

export default {
    name: "GroupUseLogDetail",
    components: {},
    mixins: [TablePage],
    props: {
        groupId: {
            type: Number,
            default: null
        },
        groupName: {
            type: String,
            default: "机构名称"
        },
        time: {
            type: Array,
            default:null
        },
        ipStr:{
            type: String,
            default: null
        },
        real: {
            type: Boolean,
            default: false
        },
        permission: {
            type: Array,
            default: null
        },
    },
    data() {
        return {
            dataList: {
                accessLog: {
                    query:{
                        groupType:"month",
                    },
                    loading: false,
                    res: {
                        total: 0,
                        timeCount: [],
                        type: null,
                        typeCount: []
                    },
                },
                useLog: {
                    query:{
                        groupType:"month",
                    },
                    loading: false,
                    res: {
                        total: 0,
                        timeCount: [],
                        type: null,
                        typeCount: []
                    },
                },
                paperUseLog: {
                    query:{
                        industryType:"zhiye",
                    },
                    loading: false,
                    res: {
                        total: 0,
                        timeCount: [],
                        type: null,
                        typeCount: [],
                        exams:[]
                    },
                },
                questionUseLog: {
                    query:{
                        industryType:"zhiye",
                    },
                    loading: false,
                    res: {
                        total: 0,
                        timeCount: [],
                        type: null,
                        typeCount: [],
                        exams:[]
                    },
                },
                registerLog: {
                    query:{
                        groupType:"month",
                    },
                    loading: false,
                    res: {
                        total: 0,
                        timeCount: [],
                        type: null,
                        typeCount: []
                    },
                },
                timeUseLog: {
                    query:{
                        groupType:"month",
                    },
                    loading: false,
                    res: {
                        total: 0,
                        timeCount: [],
                        type: null,
                        typeCount: []
                    },
                },
                downLoadLog: {
                    query:{
                        groupType:"month",
                    },
                    loading: false,
                    res: {
                        total: 0,
                        timeCount: [],
                        type: null,
                        typeCount: []
                    },
                },
            },
            list: [],
            activeName: "accessLog",
            accessLogTableData: [],
            queryData: {
                groupId: this.groupId,
                time: this.time,
                ipStr:this.ipStr,
                sourceData: true,
                sourceTypes: ["PcZhiYe", "PcGjtk", "AppZhiYe", "AppGjtk", "WpZhiYeApp", "WpZSZhiYe", "WpZSGjtk"],
                registerTypes:["pc","app","miniProgram"],
                real: this.real
            },
            format: {
                dateTimeFormat: "yyyy-MM-dd HH:mm:ss",
                dateFormat: "yyyy-MM-dd",
                monthFormat: "yyyy-MM",
                yearFormat: "yyyy"
            },
            sourceTypes: [
                {
                    "label": "PC-职业资格",
                    "value": "PcZhiYe"
                },
                {
                    "label": "PC-高教题库",
                    "value": "PcGjtk"
                },
                {
                    "label": "维普考试APP-职业资格",
                    "value": "AppZhiYe"
                },
                {
                    "label": "维普考试APP-高教题库",
                    "value": "AppGjtk"
                },
                {
                    "label": "维普职业考试题库APP",
                    "value": "WpZhiYeApp"
                },
                {
                    "label": "维普掌上题库(微信端)-职业资格",
                    "value": "WpZSZhiYe"
                },
                {
                    "label": "维普掌上题库(微信端)-高教题库",
                    "value": "WpZSGjtk"
                },
            ],
            registerTypes: [
                {
                    "label": "PC",
                    "value": "pc"
                },
                {
                    "label": "APP",
                    "value": "app"
                },
                {
                    "label": "小程序",
                    "value": "miniProgram"
                },
            ]
        };
    },
    computed: {
        ...mapState({})
    },
    watch: {},
    created() {
        this.initSourceTypes();
    },
    mounted() {
        this.init();
    },
    methods: {
        init(){
            this.getData("accessLog");
            this.getData("useLog");
            this.getData("paperUseLog");
            this.getData("questionUseLog");
            this.getData("timeUseLog");
            this.getData("downLoadLog");
            this.getData("registerLog");
        },
        initSourceTypes() {
            let tmpQuerySourceTypes = [];
            let tmpSourceTypes = [];
            if (this.permission) {
                this.permission.forEach(per => {
                    if (per.enable) {
                        if ("zhiye" === per.type) {
                            tmpQuerySurceTypes.push("PcZhiYe");
                            tmpSurceTypes.push({
                                "label": "PC-职业资格",
                                "value": "PcZhiYe"
                            })
                        } else if ("gjtk" === per.type) {
                            tmpQuerySurceTypes.push("PcGjtk");
                            tmpSurceTypes.push({
                                "label": "PC-高教题库",
                                "value": "PcGjtk"
                            })
                        } else if ("wpksApp" === per.type) {
                            tmpQuerySurceTypes.push("AppZhiYe");
                            tmpQuerySurceTypes.push("AppGjtk");
                            tmpSurceTypes.push({
                                "label": "维普考试APP-职业资格",
                                "value": "AppZhiYe"
                            });
                            tmpSurceTypes.push({
                                "label": "维普考试APP-高教题库",
                                "value": "AppGjtk"
                            });
                        } else if ("zyksApp" === per.type) {
                            tmpQuerySurceTypes.push("WpZhiYeApp");
                            tmpSurceTypes.push({
                                "label": "维普职业考试题库APP",
                                "value": "WpZhiYeApp"
                            });

                        } else if ("wpzstk" === per.type) {
                            tmpQuerySurceTypes.push("WpZSZhiYe");
                            tmpQuerySurceTypes.push("WpZSGjtk");
                            tmpSurceTypes.push({
                                "label": "维普掌上题库(微信端)-职业资格",
                                "value": "WpZSZhiYe"
                            });
                            tmpSurceTypes.push({
                                "label": "维普掌上题库(微信端)-高教题库",
                                "value": "WpZSGjtk"
                            });
                        }
                    }
                })
            }
            this.sourceTypes = tmpSourceTypes;
            this.queryData.sourceTypes = tmpQuerySourceTypes;
        },
        clickSearch() {
            this.getData(this.activeName);
        },
        resetSearch() {
            this.queryData = { ...this.initQueryData };
            this.getData(this.activeName);
        },
        getData(type) {
            if( this.ipCheck()){
                this.dataList[type].loading = true;
                let params = {
                    ...this.queryData,
                    ...this.dataList[type].query,
                    type: type,
                    startTime: this.queryData.time[0].format(this.format.dateFormat) + " 00:00:00",
                    endTime: this.queryData.time[1].format(this.format.dateFormat) + " 23:59:59",
                }
                get("/user/log/type-detail", params).then(res => {
                    this.dataList[type].res = res;
                }).finally(() => {
                    this.dataList[type].loading = false;
                })
            }

        },
        ipCheck(){
            if(this.queryData.ipStr){
                let split = this.queryData.ip.split("-");
                if(split.length !== 2){
                    this.$message.warning("ip段通过 - 分隔");
                    return false;
                }
                if(!(isIp(split[0]) && isIp(split[1])) || !(isIpV6(split[0]) && isIpV6(split[1]))){
                    this.$message.warning("ip格式不对");
                    return false;
                };
                if(this.compareIP(split[0] , split[1])){
                    this.$message.warning("截止ip必须大于起始ip");
                    return false;
                }

            }
            return true;
        },
        compareIP(ipBegin, ipEnd) {
            if (this.isIpV4(ipBegin) && this.isIpV4(ipEnd)) {
                return  this.compareIPV4(ipBegin, ipEnd);
            } else if (!this.isIpV4(ipBegin) && !this.isIpV4(ipEnd)) {
                return this.compareIPV6(ipBegin, ipEnd);
            } else {
                this.$confirm("请保持IP类型一致")
                return false;
            }
        },
        isIpV4(ip) {
            if (ip.indexOf(".") > 0) {
                return true;
            }
        },
        compareIPV4(ipBegin, ipEnd) {
            var temp1;
            var temp2;
            temp1 = ipBegin.split(".");
            temp2 = ipEnd.split(".");
            for (var i = 0; i < 4; i++) {
                if (parseInt(temp1[i]) > parseInt(temp2[i])) {
                    return true;
                } else if (parseInt(temp1[i]) < parseInt(temp2[i])) {
                    return false;
                }
            }
            return false;
        },
        compareIPV6(ipBegin, ipEnd) {
            var temp1;
            var temp2;
            temp1 = ipBegin.split(":");
            temp2 = ipEnd.split(":");
            //循环比较对应的项
            for (var i = 0; i < temp1.length; i++) {
                if (temp1[i] === ("")) {
                    if (temp2[i] === ("")) { //对应的项都位空，往下比较
                        continue;
                    } else {
                        return false;
                    }
                } else {
                    if (temp2[i] === ("")) {
                        return true;
                    } else {   //确定对应的项不位空，讲字符串转换位整数进行比较
                        var value1 = parseInt(temp1[i], 16);
                        var value2 = parseInt(temp2[i], 16);
                        if (value1 > value2) {
                            return true;
                        } else if (value1 < value2) {
                            return false;
                        } else {
                            continue;
                        }
                    }
                }
            }
            //循环结束，表示两个串表示的地址相同
            return true;

        },
        getSummaries(param) {
            const {columns, data} = param;
            const sums = [];
            columns.forEach((column, index) => {

                if (index === 0) {
                    sums[index] = "总计";
                } else if (index === 1) {
                    const values = data.map(item => Number(item[column.property]));
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);


                } else {
                    sums[index] = "-";
                }

            });
            return sums;

        },
        getPaperSummaries(param) {
            const {columns, data} = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "总计";
                } else  {
                    const values = data.map(item => Number(item[column.property]));
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);


                }

            });
            return sums;

        },
        getQuestionSummaries(param) {
            const {columns, data} = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = "总计";
                } else  {
                    const values = data.map(item => Number(item[column.property]));
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                }

            });
            return sums;

        },
        indexMethod(index) {
            return index + 1;
        }
    }
};
</script>

<style lang="scss" scoped>
.tabDiv {
    float: left;
    width: 50%;
}
.title {
    font-weight: bolder;
    font-size: 20px;
}

.school-logo {
    .logo-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 108px;
        height: 108px;
        line-height: 108px;
        text-align: center;
    }

    .logo-img {
        width: 108px;
        height: 108px;
        display: block;
    }
}

.table-edit-from {
    .address-select {
        width: 8em;
        margin-right: 2em;
    }
}
</style>
<style>
.school-logo .logo-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.school-logo .logo-uploader .el-upload:hover {
    border-color: #409eff;
}
</style>
